<template>
	<view class="containerPayPwd">
		<view class="label">
			<text class="label-l">原密码</text>
			<view class="label-r">
				<u-input type="password" inputAlign="right" :border="false" maxlength="16" v-model="formData.oldPass" placeholder="请输入原密码" clearable></u-input>
			</view>
		</view>
		<view class="label">
			<text class="label-l">新密码</text>
			<view class="label-r">
				<u-input type="password" inputAlign="right" maxlength="16" v-model="formData.newPass" placeholder="请输入新密码" :border="false" clearable></u-input>
			</view>
		</view>
		<view class="label">
			<text class="label-l">确认密码</text>
			<view class="label-r">
				<u-input type="password" inputAlign="right" maxlength="16" v-model="formData.newPassAgain" placeholder="请输入确认密码" :border="false" clearable></u-input>
			</view>
		</view>
		<view class="alertIcon">
			<text class="alertIcon_text">注意: 密码仅支持字母、数字和标点符号,位数为6位至16位之间,且不能使用空格</text>
		</view>

		<view class="ubtrnbox">
			<u-button class="ubtrnitem" type="primary" @click="saveMyData">确认修改</u-button>
		</view>
	</view>
</template>

<script>
import { updatePassWord } from '@/api/logisitcsCompany/index.js';
import { navBack, setLoadingToast, setToast } from '@/common/utils';
export default {
	data() {
		return {
			formData: {
				oldPass: '',
				newPass: '',
				newPassAgain: ''
			}
		};
	},
	methods: {
		saveMyData() {
			const D = this.isValidator();
			if (D) {
				return setToast(D);
			}

			setLoadingToast('正在修改...');
			try {
				updatePassWord(this.formData).then((res) => {
					setToast('修改成功');
					uni.hideLoading();
					setTimeout(() => {
						navBack();
					}, 200);
				});
			} catch (e) {
				uni.hideLoading();
				//TODO handle the exception
			}
		},
		isValidator() {
			const { oldPass, newPass, newPassAgain } = this.formData;
			if (oldPass.length < 6) return '原密码格式错误';
			if (newPass.length < 6) return '新密码格式错误';
			if (newPassAgain.length < 6) return '请确认新密码';
			if (newPassAgain !== newPass) return '新密码两次输入不相同';
			return false;
		}
	}
};
</script>

<style scoped lang="scss">
.containerPayPwd {
	.label {
		display: flex;
		justify-content: space-between;
		padding: 25rpx;
		border-bottom: 1rpx solid #f1f1f1;
		align-items: center;

		.label-l {
			font-size: 26rpx;
			font-weight: 500;
		}

		.label-r {
			// border: 1rpx solid #ccc;
			display: flex;
			align-items: center;
		}
	}

	.alertIcon {
		padding: 10rpx 30rpx;

		.alertIcon_text {
			font-size: 23rpx;
			color: #898989;
		}
	}

	.ubtrnbox {
		padding: 30rpx;

		.ubtrnitem {
			height: 100rpx;
			border: 0;
			color: #f1f1f1;
		}
	}
}
</style>
